<template>
	<view class="container">
		<view class="bg-white">
			<uv-tabs :list="tabList" :current="current" @change="onChange" keyName="name" :scrollable="false"></uv-tabs>
		</view>
		<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
			<view v-for="item in deviceList" :key="id" class="li">
				<view class="top">
					<view class="top-content">
						<view class="left">
							<view class="stationName">
								{{item.name}}
							</view>
							<view class="statusView">
								<view class="status1">
									<view class="com-state">
										<image class="state" :src="statusIconMap[item.inState]"></image>
										<text class="status-text1"> {{statusMap[item.inState]}}</text>
									</view>
								</view>

							</view>
						</view>
						<!-- 授权设置 -->
						<view class="status-collect">
							<view class="setting">

							</view>
						</view>

						<view class="check">
							<!-- :url="`/pages/components/pages/monitor/components/monitorDetail?detailId=${item.id}`" -->
							<navigator style="display: flex;align-items: center;">
								<view class="txt" @click="handleView(item)">查看</view>
								<view> > </view>
							</navigator>
						</view>
					</view>

				</view>
				<view class="bottom">
					<view class="bottom-list" v-for="every in fieldList" :key="every.prop">
						<text>{{every.title}}:</text>
						<text selectable v-if="item[every.prop] == null">--</text>
						<!-- <text selectable v-else>{{item[every.prop] }}</text> -->

						<text selectable v-else>{{getMappedText(every.prop, item) }}</text>
					</view>

				</view>
			</view>
		</view>
		<uv-empty v-if="deviceList.length == 0" mode="list"></uv-empty>

	</view>

</template>

<script setup>
	import cookie from '@/utils/cookie'
	import {
		ref,
		onMounted
	} from "vue"
	import {
		reqInverterList,
		reqCombinerList,
		reqWestationList,
		reqCollectorList,
		reqMeterList,
		reqTransformerList,
		reqAssemblyList,
		reqCabinetList,
		reqOtherList,
	} from "@/api/model/photovoltaic"

	const props = defineProps({
		dzId: {
			type: String
		}
	})

	const deviceList = ref([{
		"id": "00001",
		"status": 0,
		"name": "大长兴一号风机",
		"deviceId": "DCX-FJ-1",
		"dailyPower": "3.01MWh",
		"activePower": "1369.48kw",
		"windSpeed": "9.21m/s",
	}])
	const page = ref(1)
	const pageSize = ref(10)
	const queryParams = ref({
		"isPagination": true,
		"pageNum": 1,
		"pageSize": 10,
		"queryObj": {
			"dzId": props.dzId,
			"name": "",
			"inState": ""
		}
	})
	const currentName = ref('逆变器')
	const fieldList = ref([{
			title: 'SN/图纸编号',
			prop: 'sn'
		},
		{
			title: '品牌/型号',
			prop: 'brand'
		},
		{
			title: '发电功率（KW）',
			prop: 'generation'
		},
		{
			title: '当日发电量（kWh）',
			prop: 'sameDay'
		},
		{
			title: '累计发电量（MWh）',
			prop: 'totalCumulative'
		},
		{
			title: '数据更新时间',
			prop: 'updateTime'
		},
	])
	const current = ref(0)
	const tabList = ref([{
			type: -1,
			name: '逆变器',
		}, {
			type: 0,
			name: '汇流箱',
		}, {
			type: 1,
			name: '气象站'
		},
		{
			type: 2,
			name: '采集器'
		},
		{
			type: 3,
			name: '电表'
		},

	])

	const statusMap = {
		0: '在线',
		1: '告警',
		2: '离线',
	}
	const statusIconMap = {
		0: new URL('@/static/images/icons/online.svg', import.meta.url).href,
		1: new URL('@/static/images/icons/alarm.svg', import.meta.url).href,
		2: new URL('@/static/images/icons/offline.svg', import.meta.url).href
	}
	const getFileldList = () => {

		let modelId = cookie.get('zh-h5-select-module')

	}
	//查看设备详情
	const handleView = (val) => {
		console.log("查看的", val)

		switch (currentName.value) {
			case '逆变器':
				uni.navigateTo({
					url: `/pages/components/pages/monitor/components/inverter?detailId=${val.eqId}`
				})
				break;


			case '汇流箱':
				uni.navigateTo({
					url: `/pages/components/pages/monitor/components/monitorDetail?detailId=${val.eqId}`
				})
				break;



		}

	}
	//对应值
	const getMappedText = (prop, item) => {
		if (prop == 'sn') {
			// console.log("sn==", prop, item)
			return item['sn'] + '/' + item['drawingId']
		} else if (prop == 'brand') {
			return item['brand'] + '/' + item['model']
		} else {
			return item[prop]
		}

	}

	const getOrders = async (isRefresh = false, type) => {
		uni.showLoading({
			title: '加载中'
		})
		if (isRefresh) {
			deviceList.value = []
			page.value = 1
		}

		queryParams.value.pageNum = page.value
		queryParams.value.pageSize = pageSize.value

		const apiMap = new Map([
			['逆变器', reqInverterList],
			['汇流箱', reqCombinerList],
			['气象站', reqWestationList],
			['采集器', reqCollectorList],
			['电表', reqMeterList],
			['default', reqInverterList] //默认是逆变器
		])

		const apiFunction = apiMap.get(type) || apiMap.get('default')
		let ordersData = await apiFunction(queryParams.value);
		if (ordersData.data.data && ordersData.data.data.list.length > 0) {
			deviceList.value = deviceList.value.concat(ordersData.data.data.list)

			page.value += 1
		}
		uni.stopPullDownRefresh();
		uni.hideLoading()
	}
	const onChange = (e) => {
		console.log("分订单", e)
		currentName.value = e.name
		getOrders(true, e.name)
	}
	onMounted(() => {
		getOrders(true)
		getFileldList()
	})
</script>

<style lang="scss" scoped>
	.container {
		.bg-white{
			 position: sticky;
			  top: 0;
			  background: #fff; /* 避免内容被遮盖 */
			  padding: 10px;
			  z-index: 9; /* 确保层级在最上层 */
		}
		.orders-list {
			.li {
				min-height: 458rpx;
				margin-bottom: 20rpx;
				padding: 10rpx 14rpx 12rpx 18rpx;
				background-color: #fff;

				.top {
					height: 108rpx;
					width: 100%;

					.top-content {
						display: flex;
						flex: 1;
						position: relative;
						justify-content: space-between;
						border-bottom: 1px solid #d9d9d9;

						.status-collect {
							flex: 3;
						}

						.check {
							flex: 2;
							line-height: 85rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #75B2EB;
							position: absolute;
							right: 30rpx;

							::v-deep {
								.navigator-wrap {
									display: flex;
								}
							}


							.txt {
								margin-right: 10rpx;
							}
						}
					}

					.left {
						.stationName {
							flex: 1;
							min-width: 99rpx;
							height: 50rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 28rpx;
							margin-left: 12rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #333333;
							line-height: 75rpx;
						}

						.statusView {
							display: flex;
							margin: 8rpx 0 20rpx 0;
						}

						.status1 {

							width: 105rpx;
							height: 28rpx;
							font-size: 20rpx;
							margin-left: 13rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;

							.com-state {
								display: flex;
								align-items: center;
							}

							.state {
								width: 20rpx;
								height: 20rpx;
								margin-right: 8rpx;
								background-size: 100%;
							}
						}
					}
				}

				.bottom {
					min-height: 350rpx;
					margin-top: 24rpx;
					width: 100%;

					.bottom-list {
						padding: 0 11rpx;
						margin-bottom: 22rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;
						display: flex;
						justify-content: space-between;
					}
				}
			}

		}
	}
</style>